<template>
	<view class="bgIndex">
		<!-- <sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex" padding="12rpx"
			activeColor="#785DF6" :size="100" activeLineBg="#785DF6" textAlign="center" activeLineWidth="100%"
			activeDirection="space-between" activeLineHeight="5rpx" bgColor="#fff" :margin="20"
			@change="e=>getChange(e,tabList[e].id)"></sunui-navbar>
		<view class="padding20"> -->


			<view class="search-content ">

				<image class="search-img" :src=search mode=""></image>
				<input placeholder="请搜索社群标题" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">

				<!-- 群列表 -->
				<view class="groupList " v-for="(item,index) in list" :key="index">
					<view class="flex-between margin-bottom_20rpx">
						<image class="groupImg" :src="item.head_img" mode=""></image>
						<view class="">

							<view class="flex-start-center">
								<!-- <view class="topMounted flex">
									<text>顶置</text>
								</view> -->
								<view class="font-weight">
									{{item.name}}
								</view>
							</view>
							<view class="font-overflow2 " style="max-width: 350rpx;color: #999999;">
								<text>{{item.desc}}</text>
							</view>
							<view class="">
								<image class="humanHead" :src="path88" mode=""></image>
								<text style="color: #0191FF;">{{item.allow_join_number}}人 | {{item.create_time}}</text>
							</view>
						</view>
						<view class="">
							<view class="addGroup flex" @click="isAllowedFn(item.id)">
								<text>二维码</text>
							</view>
							
						</view>
					</view>
				


				</view>
			</mescroll-body>
			<!-- <view class="buildList">
            	<view class="font-weight margin-bottom_20rpx flex-start-center" style="color: #666666;">
            		<text>搭子号：dazizi252141541447</text>
            		<view class="copy flex margin-left_10rpx">
            			<text class="">
            				复制
            			</text>
            		</view>
            	</view>
            	<view class="flex-end-top ">
            		<view class="orderLocation">
            			<image class="orderImg" src="https://n8.weijuyunke.com/2024-06-07/f8292202406071854496600.png"
            				mode=""></image>
            			<view class="tape flex">
            				<image class="playerImg" :src="suspend" mode=""></image>
            				<view class="audio ">
            					<view class="wave"></view>
            					<view class="wave"></view>
            					<view class="wave"></view>
            					<view class="wave"></view>
            					<view class="wave"></view>
            					<view class="wave"></view>
            				</view>
            				<text class="">
            					12s
            				</text>
            			</view>
            		</view>
            		<view class="margin-left_16rpx flex-columns" style="width:454rpx;height: 240rpx;">
            			<view class="font-overflow2 font-weight" style="width:100%">
            				端午节去长沙寻找组队搭子
            
            
            			</view>
            			<view class=" font-overflow flex-between">
            			
            				<view class="flex-start-center">
            					<image class="tagImg" src="../../static/第一行所有图标/组合 788.png" mode="aspectFit"></image>
            			
            					<view class="tagTitle flex">
            						王者一星
            					</view>
            					<view class="tagTitleGay  flex">
            						团队意识
            					</view>
            				</view>
            				
            			
            			
            			</view>
            			<view class="font-overflow">
            				<text>全赛季的巅峰王者全能补位，巅峰赛1800全赛季的巅峰王者全能补位，巅峰赛1800</text>
            			</view>
                        <view class="onLine flex-start-center margin_10rpx_0">
                        	<text style="margin-left: 10rpx;">全天在线24小时在线</text>
                        </view>
            			
            			<view class="">
            				<text style="color: #999999;">18/局</text>
            			</view>
            
            
            		</view>
            
            	</view>
            	
            	
            	<view class="flex-between margin-top_20rpx" style="width: 100%;">
            		<view class="">
            			<text>发布时间：2024.10.32 15:32</text>
            		</view>
            		 <view class=" flex-end " >
            		     
            			
            		
            			<view class="removeFromShelves flex margin-left_10rpx">
            					 
            				<text>下架</text>
            			</view>
            		 	
            		 	<view class="edit flex margin-left_10rpx">
            		 			 
            		 		<text>编辑</text>
            		 	</view>
            			<view class="delete flex margin-left_10rpx">
            					 
            				<text>删除</text>
            			</view>
            		 </view>
            	</view>
            	<view class="orderStatus flex">
            		<text>已完成</text>
            	</view>
            </view> -->



			<view class="height50">

			</view>
		
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
					suspend:this.$img.suspend,
				search:this.$img.search,
				path88:this.$img.path88,
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				currentIndex: 0,
				list: [],
				tabList: [{
					name: '全部',
					id: '' //null
				}, {
					name: '待审核',
					id: '1' //null
				}, {
					name: '上架中',
					id: '2' //null
				},{
					name: '下架',
					id: '3' //null
				},{
					name: '删除',
					id: '4' //null
				},{
					name: '驳回',
					id: '5' //null
				}, ],
				detailInfo: [],
				searchVal:'',
				status:0

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})

		},
		computed: {

			// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '全部' : status == 1 ? '待审核' : status == 2 ? '上架中' : status == 3 ? '下架' :  status == 4?'删除':'驳回';


					return orderStatus;
				};
			},
		},
		methods: {
			isAllowedFn(id){
				 this.$sun.navGo('/pagesB/index/addScanCode',{id:id})
			},
			
			getChange(index, id) {
				console.log(index, id)
				this.status = id
				this.currentIndex = index
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
			
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			deleteFn(item, status){
				uni.showModal({
					title: '提示',
					content: '是否删除' + item.name + '社群',
					success: async (res) => {
						if (res.confirm) {
							
							const result = await this.$http.post({
								url: this.$api.updateCommunityStatus,
								data: {
									status: status,
									id: item.id,
							
							
								},
								headers: {
									'Authorization': this.userInfo.token
								}
							
							})
							if (result.code == 0) {
								
								this.$sun.toast(result.message, 'none')
								
								setTimeout(()=>{
									this.mescroll?.resetUpScroll();
								},500)
							
							} else {
							
								this.$sun.toast(result.message, 'none')
							}
						} else if (res.cancel) {
							
						}
					}
				});
			},
			async Listing(item, status) { 
				// 掉接口
				uni.showModal({
					title: '提示',
					content: '是否下架' + item.name + '社群',
					success: async (res) => {
						if (res.confirm) {
							
							const result = await this.$http.post({
								url: this.$api.updateCommunityStatus,
								data: {
									status: status,
									id: item.id,
							
							
								},
								headers: {
									'Authorization': this.userInfo.token
								}
							
							})
							if (result.code == 0) {
								
								this.$sun.toast(result.message, 'none')
								
								setTimeout(()=>{
									this.mescroll?.resetUpScroll();
								},500)
							
							} else {
							
								this.$sun.toast(result.message, 'none')
							}
						} else if (res.cancel) {
							
						}
					}
				});
			},
			publishingServicesFn() {

				this.$sun.navGo('/pagesA/personalCenter/publishTasks')
			},
			edit(item) {
				console.log(item)



				this.$sun.navGo('/pagesA/personalCenter/addCommunity', {
					...item
				})

			},
		
			
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.myJoinCommunity,
					data: {
						page: scroll.num,
						limit: 10,
					    name:this.searchVal,
					




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);





					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},

		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		padding: 20rpx;

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			height: 76rpx;

			background: rgb(255, 255, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}
        
		.groupList {
			position: relative;
			.orderStatus {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #fff;
				background: rgb(120, 93, 246);
			}
			border-radius: 20rpx;

			margin-top: 20rpx;

			padding: 20rpx;
			background: rgb(255, 255, 255);

			.groupImg {
				width: 158.84rpx;
				height: 156rpx;
				margin-right: 10rpx;
			}

			.humanHead {
				width: 22.58rpx;
				height: 22.68rpx;
			}

			.topMounted {
				width: 68rpx;
				height: 36rpx;
				border-radius: 12rpx;
				color: #fff;
				background: rgb(1, 145, 255);
				margin-right: 5rpx;
			}

			.addGroup {
				width: 106rpx;
				padding: 10rpx;
				border-radius: 132rpx;
				color: #fff;
				background: linear-gradient(270.00deg, rgb(89, 131, 255), rgb(162, 52, 255) 100%);
			}
			.removeFromShelves {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(109, 212, 1);
			}
			
			.edit {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(1, 145, 255);
				;
			}
			
			.delete {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(255, 0, 0);
			}
		}

		.buildList {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 20rpx;
			background: rgb(255, 255, 255);
			margin-top: 20rpx;
			border-radius: 20rpx;

			.copy {
				width: 78rpx;
				height: 42rpx;
				border-radius: 98rpx;
				color: #999999;
				background: rgb(240, 240, 240);
			}

			.privateChat {

				height: 24px;
				padding: 0 5rpx;
				box-sizing: border-box;
				border: 1px solid rgb(98, 54, 255);
				border-radius: 6px;
				color: #6236FF;
				background: rgb(255, 255, 255);

				.chatImg {
					width: 25.54rpx;
					height: 24.96rpx;
					margin-right: 5rpx;
				}
			}

			.contactHost {
				width: 158rpx;
				height: 52rpx;
				color: #785DF6;
				box-sizing: border-box;
				border: 2rpx solid rgb(120, 93, 246);
				border-radius: 116rpx;

				background: rgb(255, 255, 255);

				.chatImg {
					width: 25.54rpx;
					height: 24.96rpx;
					margin-right: 10rpx;
				}
			}

			.exitActivity {
				width: 158rpx;
				height: 52rpx;
				color: red;
				box-sizing: border-box;
				border: 2rpx solid red;
				border-radius: 116rpx;

				background: rgb(255, 255, 255);

				.chatImg {
					width: 25.54rpx;
					height: 24.96rpx;
					margin-right: 10rpx;
				}
			}

			.viewDetails {
				width: 158rpx;
				height: 52rpx;
				color: rgb(51, 51, 51);
				box-sizing: border-box;
				border: 4rpx solid rgb(240, 240, 240);
				border-radius: 116rpx;

				background: rgb(255, 255, 255);

				.chatImg {
					width: 25.54rpx;
					height: 24.96rpx;
					margin-right: 10rpx;
				}
			}

			.removeFromShelves {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(109, 212, 1);
			}

			.edit {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(1, 145, 255);
				;
			}

			.delete {
				border-radius: 8rpx;
				width: 112rpx;
				color: #fff;
				height: 48rpx;
				background: rgb(255, 0, 0);
			}

			.orderStatus {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #fff;
				background: rgb(120, 93, 246);
			}

			.orderLocation {
				position: relative;

				.tape {
					position: absolute;

					left: 8rpx;
					bottom: 10rpx;
					z-index: 999;
					width: 144rpx;
					height: 50rpx;
					border-radius: 40rpx;
					color: #fff;
					box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgb(201, 134, 255);
					background: linear-gradient(90.00deg, rgb(40, 139, 255) 4.217%, rgb(143, 84, 254) 100%);

					.playerImg {
						width: 30rpx;
						height: 30rpx;
					}

					.audio {
						margin: 0 10rpx;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						height: 50rpx;
						width: 30%;

						.wave {
							width: 7px;
							margin: 0 2px;
							background-color: #4caf50;
							animation: audio-wave 1s infinite ease-in-out;

							&:nth-child(1) {
								animation-delay: 0.1s;
							}

							&:nth-child(2) {
								animation-delay: 0.2s;
							}

							&:nth-child(3) {
								animation-delay: 0.3s;
							}

							&:nth-child(4) {
								animation-delay: 0.4s;
							}

							&:nth-child(5) {
								animation-delay: 0.5s;
							}
						}
					}

					@keyframes audio-wave {
						0% {

							height: 6px;
							transform: translateY(0px);
							background: #ff8e3a;
						}

						25% {
							height: 6px;
							transform: translateY(0px);
							background: #9c73f8;
						}

						50% {
							height: 10px;
							transform: translateY(-5px) scaleY(1.5);
							background: #ed509e;
						}

						75% {
							height: 6px;
							transform: translateY(0px);
							background: #9c73f8;
						}

						100% {
							height: 6px;
							transform: translateY(0px);
							background: #0fccce;
						}
					}

				}

				.orderStatusImg {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					background: rgb(224, 32, 32);
					z-index: 999;
				}

				.orderStatusImged {
					position: absolute;
					left: 0;
					top: 0;
					width: 106rpx;
					height: 48rpx;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					color: #fff;
					border-radius: 16rpx 0rpx 16rpx 0rpx;

					background: rgb(0, 0, 0);
					z-index: 999;
				}
			}

			.onLine {
				width: 282rpx;
				height: 53rpx;
				border-radius: 10px 0px 0px 10px;
				color: rgb(165, 49, 255);

				;
				background: linear-gradient(78.69deg, rgba(165, 49, 255, 0.23) 0.163%, rgba(165, 49, 255, 0) 99.728%);
			}

			.acceptingOrders {
				width: 148rpx;
				height: 66rpx;
				border-radius: 0rpx 0rpx 18rpx 0rpx;
				color: #fff;
				background: rgb(250, 100, 1);
				margin: 0 -20rpx -20rpx 0;
			}

			.endOrder {
				width: 148rpx;
				height: 60rpx;
				border-radius: 20rpx 0rpx 18rpx 0rpx;
				color: #fff;
				background: rgb(224, 32, 32);
				margin: 0 -20rpx -20rpx 0;
			}

			.rejectOrder {
				width: 154rpx;
				height: 66rpx;
				border-radius: 20rpx 0rpx 0rpx 0rpx;
				color: #fff;
				background: rgb(0, 0, 0);
				margin: 0 0rpx -20rpx 0;
			}

			.orderStatused {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #999999;
				background: rgb(236, 235, 235);
			}

			.tagImg {
				width: 118rpx;
				height: 38rpx;
			}

			.addImg {
				width: 30.02rpx;
				height: 30.02rpx;
			}

			.tagTitle {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(0, 198, 141);
				background: rgb(212, 255, 249);
				margin-right: 5rpx;
			}

			.avaterImg {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.tagTitleGay {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #666666;
				background: #F5F5F5;
				margin-right: 5rpx;
			}

			.tagTitleOrange {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(238, 100, 41);
				background: rgba(238, 100, 41, 0.13);
				;
				margin-right: 5rpx;
			}

			.tagTitlePink {
				width: 116rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #F95CEF;
				background: #FFF2F8;
				margin-right: 5rpx;
			}

			.location {
				width: 110rpx;
				height: 48rpx;
				border-radius: 20rpx;

				background: rgb(235, 245, 255);
			}

			.v-p-share {
				padding: 2rpx 2rpx 0 2rpx;

				.v-m-width {
					margin-right: 40rpx;

					.pt_img {
						width: 50rpx;
						height: 50rpx;
						margin-right: -30rpx;
						border-radius: 50%;
					}
				}

				.v-share-friend {
					text {
						color: #294d7d;
						font-size: 24rpx;
						padding-right: 50rpx;
					}

					view {
						color: #ffffff;
						width: 154rpx;
						height: 58rpx;
					}
				}

				.v-share-friend2 {
					text {
						color: #294d7d;
						font-size: 24rpx;
					}
				}
			}

			.editImg {
				width: 20px;
				height: 20px;
				margin-bottom: 8rpx;
			}

			.orderImg {
				width: 192rpx;
				height: 192rpx;
				// border-radius: 30rpx;


			}

			.addressImg {
				width: 28.5rpx;
				height: 28.12rpx;
			}
		}

		.PublishTag {
			z-index: 99;
			width: 95%;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;
			position: fixed;

			bottom: 20rpx;
			background: rgb(120, 93, 246);
		}

	}
</style>